<nb-card size="xsmall">
  <nb-card-header>
    <a href="#" class="a-icon-magin"><i class="ion-clipboard"></i></a>
    超采区详情
    <div style="float:right">
      <p-selectButton [options]="types" [(ngModel)]="selectedType" (onChange)="handleChange($event)">

      </p-selectButton>
    </div>
  </nb-card-header>
  <nb-card-body>
    <div class="info">
      <div class="tip_1">
          全省划定浅层地下水10433.2km³
      </div>
      <div class="tip_2">
        <ul>
          <li>一般超采区8368.23km³</li>
          <li>严重超采区2064.94km³</li>
        </ul>
      </div>
      <div class="tip_3">
          <table>
            <tr>
              <th rowspan="2" align="right">涉及</th>
              <th>德州、 聊城、 济宁、 泰安、 威海</th>
              <th rowspan="2" align="left">等10个市</th>
            </tr>
            <tr>
              <th>烟台、 潍坊、 淄博、 东营、 滨州</th>
            </tr>
          </table>
      </div>
      <div class="tip_3">
          年均超采量18240.67万m³
      </div>
    </div>
    <div class="odTable">
      <p-table [columns]="cols" [value]="ods" [scrollable]="true" scrollHeight="140px">
        <ng-template pTemplate="header" let-columns>
          <tr>
            <th *ngFor="let col of columns" style="text-align:center">
              {{col.header}}
            </th>
          </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-columns="columns">
          <tr>
            <td *ngFor="let col of columns" style="text-align:center">
              {{rowData[col.field]}}
            </td>
          </tr>
        </ng-template>
      </p-table>
    </div>
  </nb-card-body>
</nb-card>
